<template>
	<div class="apply_invioce">
	  <div class="choose_type">
	   	<div class="choose_type_title">选择发票类型</div>
	   	<div class="invioce_type">
	   	  <span :class="[{'inviocespan': 0==index}]" @click='invioce(0)'>增值税专用发票</span>
	   	  <span :class="[{'inviocespan': 1==index}]" @click='invioce(1)'>普通发票</span>
	   	</div>  	
	  </div>
	  <!--发票内容  -->
	  <div class="input_list">
	    <div class="input_item">
	     发票详情
	    </div>
	    <div class="input_item" v-if="index==1">
	      <div class="input_left head">抬头类型</div>
	      <div class="input_right radioright">
	      	 <div class="myradio"   @click='radio(0)'>
	      	 	<i :class="[{'currenti': 0==radioindex}]"></i>
	      	 	<span>企业单位</span>
	      	 </div>
	      	 <div class="myradio"   @click='radio(1)'>
	      	 	<i :class="[{'currenti': 1==radioindex}]"></i>
	      	 	<span>个人/非企业单位</span>
	      	 </div>
	      </div>
	    </div>	    
	    <div class="input_item" style="position:relative;">
	      <div class="input_left">发票抬头</div>
  		  <div class="input_right invoiceinput">
  		  	<input type="text" placeholder="填写发票抬头" v-model="invoices_name" @input="input"  @blur="blur" @focus="focus"/>
            <img src="../../assets/image/un-close.png" alt="" class="ximg" v-if="xstatus" @click="xtext">
  		  </div>
  		  <div class="infolist " v-if="searchmodal&&invoices_name!=''" >
  		  	<div v-for="item in searchinfo" @click="search(item.name,item.open_bank,item.open_account,item.register_address,item.register_phone)" class="infoitem">{{item.name}}</div>
  		  	<div class="closeinfolist" @click="close">关闭</div>
  		  </div>
	    </div>
	    <div class="input_item" v-if="radioindex==0">
	      <div class="input_left">税号</div>
  		 <div class="input_right input_right1"><input type="text" placeholder="填写纳税人识别号" v-model="invoices_num" @input="invoices_num=invoices_num.replace(/[\W]/g,'')"   style="text-transform:uppercase;"/></div>
	    </div>
	    <!-- 普通发票 -->
	    <div v-if="index==0">
		    <div class="input_item">
		      <div class="input_left">基本开户银行</div>
		      <div class="input_right input_right1"><input type="text" placeholder="填写基本开户银行" v-model="bankname"/></div>
		    </div>	
		    <div class="input_item">
		      <div class="input_left">基本开户账号</div>
		      <div class="input_right input_right1"><input type="text" placeholder="填写基本开户账号" v-model='banknum'   @input="banknum=banknum.replace(/\D/g,'')"/></div>
		    </div>
		    <div class="input_item">
		      <div class="input_left">注册场所地址</div>
		      <div class="input_right input_right1"><input type="text" placeholder="填写注册场所地址" v-model='regaddress'/></div>
		    </div>	
		    <div class="input_item">
		      <div class="input_left">注册固定电话</div>
		      <div class="input_right input_right1"><input type="text" placeholder="填写注册固定电话" v-model='regtel' onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');"/></div>
		    </div> 
	    </div>
	    <!--  -->
	    <div class="input_item">
	      <div class="input_left">发票内容</div>
	      <div class="input_right " style="color: #979797">*住宿服务*住宿服务费</div>
	    </div> 
	    <div class="input_item">
	      <div class="input_left">发票金额</div>
	      <div class="input_right input_right_money"><span class="price">{{view_price.int}}<span class="littlenum">{{view_price.float}}</span></span><span class="rmb">元</span></div>
	    </div>
	    <div class="input_textarea">
	      <div class="input_left">备注</div>
	      <textarea type="text" placeholder="如有特殊需求请备注" v-model='note'/>
	    </div> 	     	       		    	    	    
	  </div> 
	   <!-- 提交信息 -->
	   <div class="invioce_submit" @click="invioce_submit">提交信息</div>
	   <div class="invioce_tip">提交信息后请直接到前台取发票</div>
		<mt-popup
		  v-model="popupVisible"
		  position="top"
		  :modal="true">
          {{popupContent}}
		</mt-popup>	   
	</div>
</template>
<script>
import axios from 'axios';
import {Toast } from 'mint-ui';
import { Popup } from 'mint-ui';
export default{
	components:{
		"mt-popup":Popup
	},
	data(){
		return{
			index:0,
			radioindex:0,
			popupVisible:false,
			watchstatus:false,
			popupContent:"",
			invoices_name:"",//发票抬头
			invoices_num:"",//发票税号
			bankname:"",//开户银行
			banknum:"",//开户账号
			regaddress:"",//注册场所地址
			regtel:"",//注册固定电话
			detail:"住宿费",//发票内容
			note:"",//备注
			view_price:'',
			total_price:"",
			searchmodal:false,//搜索模态框
			searchinfo:'',
			xstatus:false
		}
	},
	created(){
	 var that = this;
	 var orderNumber = that.$route.query.orderNumber
	 that.orderNumber = orderNumber
	 /*获取发票初始内容*/
     axios.post("/Weixin/Order/getBill",{orderNumber:orderNumber}).then((res)=>{
        if(res.data.code == "1"){
           that.hotel_code = res.data.data.hotel_code;
           that.total_price =res.data.data.total_price;
           that.view_price = that.cutstring(res.data.data.total_price);
           that.invoices_name = res.data.data.invoice.rise;//发票抬头
           that.invoices_num =  res.data.data.invoice.duty_num;//税号
           that.bankname = res.data.data.invoice.open_bank;//开户银行
           that.banknum = res.data.data.invoice.open_account;//开户账号
           that.regaddress = res.data.data.invoice.register_address;//地址
           that.regtel = res.data.data.invoice.register_phone;//电话
 		   res.data.data.invoice.type=="0"?that.index="0":that.index="1";//发票类型
 		   res.data.data.invoice.rise_type=="0"?that.radioindex="0":that.radioindex="1";//个人、企业

        }
      })
	},
	watch:{
      invoices_name(){
      	 var that =  this;
      	 var rise = that.invoices_name
         that.searchinfo = '';
         // that.searchmodal = false;
      	 if(that.index == '1' && that.radioindex == "1"){
      	 	return false;
      	 }
      	 if(that.watchstatus){
		     axios.post("/Api/YongYou/getCompanyList",{rise:rise}).then((res)=>{
		        if(res.data.code == "1"){
	                var searchinfo = res.data.data;
	                if(searchinfo.length!=0){
	                	that.searchmodal = true;
	                }
	                if(searchinfo.length>5){
	                	searchinfo.splice(5,100);
	                }
	                that.searchinfo = searchinfo;
		        }
		        else{
		        	that.searchinfo = ''
		        	that.searchmodal = false;
		        }
		      })     	 	
      	 }
      }
	},
	methods:{
		//发票类型
		invioce(index){
			this.index = index;
			if(index == '0'){
				this.radioindex ="0";
			}
		},
	    cutstring(str){
	      var obj ={
	        int:str.substr(0,str.indexOf(".")+1),
	        float:str.substr(str.indexOf(".")+1,100)
	      }
	      return obj
	    },
		input(){
		 var that = this;
  	     that.watchstatus = true;
  	     if(this.invoices_name!=''){
  	     	that.xstatus = true;
  	     }
  	     else{
  	     	that.xstatus = false;
  	     }
		},
		//radio
		 radio(index){
			this.radioindex = index;
		 },
		 popup(msg){
		 	var that = this;
 			that.popupVisible = true;
 			that.popupContent = msg
 			setTimeout(function(){
 			that.popupVisible = false;
 			},2000)
		 },
		 //申请开票
		 apply(data){
		 	 var that = this;
		     axios.post("/Weixin/Order/invoiceApply",data).then((res)=>{
		        if(res.data.code == "1"){
		        	// Toast({message:"提交成功",duration:2000})
		        	that.$router.replace("/inviocesuccess");
		        }
		        else{
		        	Toast(res.data.msg)
		        }
		      })
		 },
		 search(invoices_name,bankname,banknum,register_address,register_phone){
		 	 var that = this;
		 	 var rise = invoices_name;
		 	 that.invoices_name = invoices_name;
		 	 that.searchmodal = false;//搜索内容框
		 	 that.watchstatus = false;//是否监听
		 	 if(!(that.index == '1' && that.radioindex == "1")){
			     /*获取企业税号*/
			     axios.post("/Api/YongYou/queryFull",{rise:rise}).then((res)=>{
			        if(res.data.code == "1"){
			        	that.invoices_num = res.data.duty_num;
			        	that.bankname = bankname;
			        	that.banknum = banknum;
			        	that.regaddress  = register_address;
			        	that.regtel = register_phone;

			        }
			        else{
			        	Toast("企业税号获取失败");
			        	that.invoices_num = ""
			        }
			      })
		 	 }	 	 
		 },
		 close(){
            this.searchmodal = false;
            this.xstatus = false;
		 },
		 xtext(){
            this.invoices_name = "";
            this.xstatus = false;
            this.searchmodal = false;
		 },
		 blur(){
	  	     	this.xstatus = false;
            
		 },
		 focus(){
		 	if(this.invoices_name!=""){
		 	   this.xstatus = true;	
		 	}
		 },
		 //提交信息
		 invioce_submit(){
		 	var that = this;
		 	var regexp=/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/	
		 	if(that.index == '0'){// 增值税
		 		if(!that.invoices_name){
		 			that.popup("请输入发票抬头")
		 			return false
		 		}
		 		if(!that.invoices_num){
		 			that.popup("税号不能为空")
		 			return false
		 		}
		 		if(!that.bankname){
		 			that.popup("请输入开户银行")
		 			return false
		 		}
		 		if(!that.banknum){
		 			that.popup("请输入开户账号")
		 			return false
		 		}
		 		if(!that.regaddress){
		 			that.popup("请输入场所地址")
		 			return false
		 		}
		 		if(!that.regtel){
		 			that.popup("请输入固定电话")
		 			return false
		 		}else{
		 			if(!regexp.test(that.regtel)){
			 			that.popup("请输入正确的固定电话")
			 			return false		 				
		 			}
		 		}
		 		var data = {
		 			hotel_code:this.hotel_code,
		 			orderNumber:this.orderNumber,
		 			type:'0',
		 			rise:this.invoices_name,
		 			duty_num:this.invoices_num,
		 			open_bank:this.bankname,
		 			open_account:this.banknum,
		 			register_address:this.regaddress,
		 			register_phone:this.regtel,
		 			detail:this.detail,
		 			note:this.note,
		 			price:this.total_price
		 		}
		 		this.apply(data) 				 				 				 				 				 		
		 	}
		 	else{//普通发票
		 		if(that.radioindex == '0'){
			 		if(!that.invoices_name){
			 			that.popup("请输入发票抬头")
			 			return false
			 		}
			 		if(!that.invoices_num){
			 			that.popup("税号不能为空")
			 			return false
			 		}	
			 		var data = {
			 			hotel_code:this.hotel_code,
		 				orderNumber:this.orderNumber,		 			
		 			    rise:this.invoices_name,
		 			    duty_num:this.invoices_num,			 			
			 			rise_type:"0",
			 			detail:this.detail,
			 			note:this.note,
			 			price:this.total_price,
			 			type:"1"		 			
			 		}
			 		this.apply(data)	 			
		 		}
		 		else{
			 		if(!that.invoices_name){
			 			that.popup("请输入发票抬头")
			 			return false
			 		}
			 		var data = {
			 			hotel_code:this.hotel_code,
		 				orderNumber:this.orderNumber,		 			
		 			    rise:this.invoices_name,		 			
			 			rise_type:"1",
			 			detail:this.detail,
			 			note:this.note,
			 			price:this.total_price,
			 			type:"1"		 			
			 		}
			 		this.apply(data)			 				 			
		 		}
		 	}
		 }
	}
}
	

</script>
<style scoped>
  .apply_invioce .input_list{
  	padding-bottom:0;
  	padding-right:0;
  }
   .littlenum{
   	font-size:13px;
   }
   .rmb{
   color: #979797;
   opacity:0.6;
   margin-left:4px;
   }
	.infolist{
		background:#fff;
		position:absolute;
		top:43px;
		right: 0;
		padding-bottom:30px;
		z-index:100;
		width:100% !important;
		background:#fff;
		width:250px;
		text-align:center;
		box-shadow: 0 8px 10px 0 rgba(0,0,0,0.10);
	}
	.infolist .infoitem{
		height:45px;
		text-align:center;
		line-height:45px;
		border-bottom:1px solid #e6e6e6;

	}

	.apply_invioce .input_item{
		justify-content:normal;
	}
    .apply_invioce .input_item .input_left{
    	font-size:15px;
    	width:94px;
    	margin-right:15px;
    } 
    .apply_invioce .input_item .radioright{
    	margin-left:33px;
    }
        .apply_invioce .input_item .head{
        	width:auto;
        }
	.apply_invioce .input_item .input_right input{
		text-align:left;
	}
	.closeinfolist{
		position:absolute;
		right:15px;
		bottom:0;
		color: #0089FC;
	}
	.ximg{
	  width:14px;
	  height:14px;
	}
	.input_left{
		flex-shrink:0;
	}
	.input_right1{
		width:100%;
	}
		.invoiceinput{
		width:250px !important;
		padding-right:5px;
	}
</style>